<template>
  <div>
    <h1>$nextTick</h1>
    <h1 ref="infoMsg">{{ info }}</h1>
    <button @click="changeInfo">更改info</button>
    <h1>{{ info1 }}</h1>
  </div>
</template>

<script>
import hanmixin from "../mixins/hanmixin";
export default {
  data() {
    return {
      info: "你遛弯呢？",
      info1: "",
    };
  },
  mixins: [hanmixin],
  created() {
    console.log(this);
  },
  methods: {
    changeInfo() {
      this.info = "把电脑合上！！";
      //   infoMsg ref  DOM元素  DOM中的值 innerHTML
      //  this.info  vue当中的数据
      //   this.info1 = this.$refs.infoMsg.innerHTML;
      //   this.info1 = this.info;
      //   某些时刻我们需要拿到最新的DOM中的值
      //   vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化
      this.$nextTick(() => {
        this.info1 = this.$refs.infoMsg.innerHTML;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>